<div id="product-show">
  <div class="left">
    <%= image_tag(@product.image_url) %>
    <a href="#" id="hyperlink-order" class="hyperlink-detail">ĐẶT MUA</a>
  </div>
  <div class="right">
    <div id="product-name"><%= @product.name %></div>
    <div id="product-status">Trạng thái: còn hàng</div>
    <div id="product-price"><%= @product.orginal_price %>.000 đ</div>
    <div id="product-description"><%= @product.description %></div>
  </div>
</div>
<style>
    #product-show {
        background-color: white;
        margin: 0 auto;
        margin-top: 30px;
        width: 700px;
        overflow: auto;
        padding: 20px;
        border: 9px solid #fff;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
    }

    .left {
        float: left;
        width: 270px;
        text-align: center;
    }

    .left img {
        border: 9px solid #fff;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
    }

    #hyperlink-order {
        font-size: 30px;
        margin-top: 5px;
    }

    .right {
        float: right;
        width: 420px;
    }

    #product-name {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    #product-status {
        color: #73b334;
        font-size: 14px;
        margin-bottom: 20px;
    }

    #product-description {
        margin-bottom: 20px;
        font-size: 16px;
    }

    #product-price {
        color: #00c0f3;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 20px;
    }
</style>